<div class="modal-header">
    <button type="button" class="close" ng-click="cancel()"><span class="icon icon-close" aria-hidden="true"></span>
    </button>
    <h3 class="modal-title">
        <span class="font-bold" translate="user.title">User</span>
        <span class="font-bold" translate="common.edit">Update</span>
    </h3>
</div>
<div class="modal-body" ng-controller="UserEditCtrl">
    <form name="userForm" class="form-horizontal form-validation" style="border:1px solid #E6E6E6;">

        <tabset class="tab-container">
            <tab>
                <tab-heading style=" font-weight:bold; line-height:20px"><span translate="user.basic"></span>
                </tab-heading>

                <div class="row wrapper-xs">
                    <label class="col-sm-2 control-label"><span class="font-bold"
                                                                translate="user.username">Username</span></label>
                    <div class="col-sm-4">
                        <input type="text" class="form-control no-border" ng-model="user.userName" disabled
                               autocomplete="off">
                    </div>
                    <label class="col-sm-2 control-label"><span class="font-bold"
                                                                translate="user.realname">Real Name</span></label>
                    <div class="col-sm-4">
                        <input type="text" class="form-control input-sm" ng-model="user.realName" disabled
                               autocomplete="off">
                    </div>
                </div>
                <div class="row wrapper-xs">
                    <label class="col-sm-2 control-label font-bold" translate="user.gender">gender</label>
                    <div class="col-sm-4">
                        <select class="form-control" ng-model="user.gender" ng-disabled="viewOnly"
                                ng-options="item.value as item['displayName' + locale] for item in gender"></select>
                    </div>
                    <label class="col-sm-2 control-label font-bold" translate="user.ethnic">ethnic</label>
                    <div class="col-sm-4">
                        <select class="form-control" required ng-model="user.race_Id" ng-disabled="viewOnly"
                                ng-options="item.race_Id as item.race_Name for item in races"></select>
                    </div>
                </div>
                <div class="row wrapper-xs">
                    <label class="col-sm-2 control-label"><span class="font-bold"
                                                                translate="user.email">Email</span></label>
                    <div class="col-sm-4">
                        <input type="email" class="form-control input-sm" ng-model="user.email" autocomplete="off">
                    </div>
                    <label class="col-sm-2 control-label"><span class="font-bold"
                                                                translate="user.mobilephone">Mobile</span></label>
                    <div class="col-sm-4">
                        <input type="text" class="form-control input-sm" ng-model="user.mobile_Phone"
                               autocomplete="off">
                    </div>
                </div>
            </tab>

            <tab ng-if="user.isDoctor">
                <tab-heading ng-click="startSearch('')" style=" font-weight:bold;line-height:20px"><span
                        translate="user.doctor"></span></tab-heading>

                <div class="row wrapper-xs" ng-if="user.isDoctor">
                    <label class="col-sm-2 control-label"><span class="font-bold"
                                                                translate="user.country">country</span></label>
                    <div class="col-sm-4" ng-init="getCountries()">
                        <select name="mySelect" id="mySelect" class="form-control input-sm"
                                ng-model="user.location_Country"
                                ng-options="option.country_Id as option.country_En_Name for option in ArrCountry"
                                ng-change="getProvinces(1)">
                        </select>
                    </div>
                    <label class="col-sm-2 control-label"><span class="font-bold"
                                                                translate="user.province">province</span></label>
                    <div class="col-sm-4" ng-init="getProvinces()">
                        <select name="province" id="province" class="form-control input-sm"
                                ng-model="user.location_Province"
                                ng-options="option.location_Id as option.loca_Cn_Name for option in ArrProvince"
                                ng-change="getCities(1)">
                        </select>
                    </div>
                </div>
                <div class="row wrapper-xs" ng-if="user.isDoctor">
                    <label class="col-sm-2 control-label"><span class="font-bold"
                                                                translate="user.city">city</span></label>
                    <div class="col-sm-4">
                        <select name="city" id="city" class="form-control input-sm" ng-model="user.location_City"
                                ng-options="option.location_Id as option.loca_Cn_Name for option in ArrCity"
                                ng-change="getCounties(1)">
                        </select>
                    </div>
                    <label class="col-sm-2 control-label"><span class="font-bold" translate="user.county">county</span></label>
                    <div class="col-sm-4">
                        <select name="county" id="county" class="form-control input-sm" ng-model="user.location_County"
                                ng-options="option.location_Id as option.loca_Cn_Name for option in ArrCounty">
                        </select>
                    </div>
                </div>
                <div class="row wrapper-xs" ng-if="user.isDoctor">
                    <label class="col-sm-2 control-label"><span class="font-bold" translate="user.hosplevel">Hospital level</span></label>
                    <div class="col-sm-4">
                        <select class="form-control input-sm" ng-model="user._doctor.hospLevel_Id"
                                ng-options="ut.hospLevel_Id as ut.hospLevel_Cn_Name for ut in hospLevels"></select>
                    </div>
                    <label class="col-sm-2 control-label"><span class="font-bold" translate="user.hosp">Hospital</span></label>
                    <div class="col-sm-4">
                        <select class="form-control input-sm" ng-model="user._doctor.hosp_Id" required
                                ng-options="ut.hosp_Id as ut.hosp_Cn_Name for ut in hosps"></select>
                    </div>
                </div>
                <div class="row wrapper-xs" ng-if="user.isDoctor">
                    <label class="col-sm-2 control-label"><span class="font-bold"
                                                                translate="user.dept">Department</span></label>
                    <div class="col-sm-4">
                        <select class="form-control input-sm" ng-model="user._doctor.dept_Id" required
                                ng-options="ut.dept_Id as ut.dept_Cn_Name for ut in depts"></select>
                    </div>
                    <label class="col-sm-2 control-label"><span class="font-bold" translate="user.doctquali">Doctor Qualification</span></label>
                    <div class="col-sm-4">
                        <select class="form-control m-b" ng-model="user._doctor.doctQuali_Id" required
                                ng-options="ut.doctQuali_Id as ut.doctQuali_Cn_Name for ut in doctQualis"></select>
                    </div>
                </div>
                <div class="form-group" ng-if="user.isDoctor">
                    <label class="col-sm-2 control-label" style="margin-right:-10px; margin-left:5px;"><span
                            class="font-bold" translate="user.intro">Intro</span></label>
                    <div class="col-sm-10" style="margin-left:6px; margin-right:-1px;">
                        <textarea rows="3" ng-model="user._doctor.doctor_Intro" class="form-control"
                                  style="margin-left:1px;overflow:auto;height:100px;max-height:100px; width:98%"></textarea>
                    </div>
                </div>

                <div class="row wrapper-xs" ng-if="canEditRole">
                    <label class="col-sm-2 control-label"><span class="font-bold" translate="user.fee_recommend">fee_recommend</span></label>
                    <div class="col-sm-4">
                        <input type="number" class="form-control input-sm" ng-model="user._doctor.fee_Recommend"
                               autocomplete="off" min="0">
                    </div>
                </div>

                <div class="row wrapper-xs" ng-if="canEditRole && user.isSpecialist">
                    <label class="col-sm-2 control-label"><span class="font-bold"
                                                                translate="user.fee_diag">fee_diag</span></label>
                    <div class="col-sm-4">
                        <input type="number" class="form-control input-sm" ng-model="user._doctor.fee_Diag"
                               autocomplete="off" min="0">
                    </div>
                    <label class="col-sm-2 control-label"><span class="font-bold" translate="user.fee_solution">fee_solution</span></label>
                    <div class="col-sm-4">
                        <input type="number" class="form-control input-sm" ng-model="user._doctor.fee_Solution"
                               autocomplete="off" min="0">
                    </div>
                </div>

                <div class="row wrapper-xs" ng-if="canEditRole && user.isSurgeon">
                    <label class="col-sm-2 control-label"><span class="font-bold" translate="user.cost_surgery">cost_surgery</span></label>
                    <div class="col-sm-4">
                        <input type="number" class="form-control input-sm" ng-model="user._doctor.cost_Surgery"
                               autocomplete="off" min="0">
                    </div>
                    <label class="col-sm-2 control-label"><span class="font-bold" translate="user.fee_surgery">fee_Surgery</span></label>
                    <div class="col-sm-4">
                        <input type="number" class="form-control input-sm" ng-model="user._doctor.fee_Surgery"
                               autocomplete="off" min="0">
                    </div>
                </div>
            </tab>

            <tab ng-if="canEditRole">
                <tab-heading style=" font-weight:bold ;line-height:20px; margin-left:-4px;"><span
                        translate="user.userrole"></span></tab-heading>
                <div class="modal-body" style="font-size:12px;">
                    <div class="panel panel-default" style="margin:-15px;">
                        <div class="row wrapper-lg ">
                            <div class="col-sm-12 " style="margin-bottom:20px;margin-left:17px">
                                <span class="font-bold" translate="user.enabledLogin">Enabled log in</span>
                                <label class="i-switch bg-info m-r" style="position:absolute;margin-left:20px;">
                                    <input type="checkbox" ng-model="user.enabled" id="button"> <i></i>
                                </label>
                            </div>

                            <div class="col-sm-12" style="border-radius:5px; border-top:1px dashed #CCC">
                            </div>
                            <div class="col-sm-12" style="margin-bottom:10px; margin-top:10px;margin-left:17px">
                                <span class="font-bold" translate="user.userrole">UserRole</span>
                            </div>
                            <div class="col-sm-6">
                                <label class="i-checks" style="margin-left:17px">
                                    <input type="checkbox" name="userTypeId" value="true"
                                           ng-model="userType.userTypeChecked"> <i></i>
                                    <span style="margin-left:0px;" translate="common.doctor"></span>
                                </label>
                            </div>
                            <div class="col-sm-6" ng-repeat="item in userRoles">
                                <label class="i-checks" style="margin-left:17px">
                                    <input type="checkbox" value="{{ item.key }}"
                                           ng-checked="userRoleKeys.indexOf(item.key)>=0"
                                           ng-click="updateSelection($event, item.key)">
                                    <i></i>
                                    {{ (selectLang == 'English') ? item.enName : item.cnName }}
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
            </tab>
        </tabset>
        <footer class="panel-footer text-right bg-light lter">
            <button class="btn btn-default" ng-click="cancel()"><span class="font-bold"
                                                                      translate="common.cancel">Cancel</span></button>
            <button type="button" class="btn btn-success" ng-click="updateUser()"
                    ng-disabled="userForm.$invalid">
                <span class="font-bold" translate="common.submit">Submit</span></button>
        </footer>
    </form>
</div>
